<template>
  <view class="pT15">
    <view class="flex jst-between mL15 mR15 relative mB10 mT15">
      <view style="flex: 1" class="flex jst-end">
        <!-- <view
          class="flex alg-center font14"
          :class="query.oddJobType.length > 0 ? 'u-blue' : 'u-3'"
          @click="openJobType"
        >
          <text class="mR10">全部职位</text>
          <u-icon
            size="20"
            name="arrow-down-fill"
            :color="query.oddJobType.length > 0 ? '#3291F8' : '#666'"
          ></u-icon>
        </view>
        <view class="flex alg-center mL20" @click="openJobSort">
          <text class="mR10" :class="query.sort.length > 0 ? 'u-blue' : 'u-3'"
            >排序</text
          >
          <u-icon
            size="20"
            name="arrow-down-fill"
            :color="query.sort.length > 0 ? '#3291F8' : '#666'"
          ></u-icon>
        </view>
        <view class="flex alg-center mL20" @click="openJobSel">
          <text class="mR10" :class="selColor ? 'u-blue' : 'u-3'">筛选</text>
          <u-icon
            size="20"
            name="arrow-down-fill"
            :color="selColor ? '#3291F8' : '#666'"
          ></u-icon>
        </view> -->
      </view>
      <view class="invoice-history" @click="toInvoiceHistory">
        <image
          class="imgW32"
          :src="resources.iconInvoiceHistory"
          mode=""
        ></image>
        <view class="mL5">发票历史</view>
      </view>
    </view>
    <mescroll-uni
      class="lisBox"
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
      :bottombar="false"
      :top="130"
    >
      <view class="pB15">
        <workerJob
          ref="workItem"
          @confirm="grabOpt"
          :isMutil="showMore"
          :list="list"
          @checkAll="checkAll"
          @choosePerson="getChoose"
        ></workerJob>
      </view>
    </mescroll-uni>
    <view
      class="flex alg-center bottomFixed pT10 pB10 bgf font16"
      v-if="showMore"
    >
      <view class="flex alg-center mL15" @click="allCheck">
        <image
          class="imgW32"
          v-if="isAllchecked"
          :src="resources.checked"
          mode=""
        ></image>
        <image class="imgW32" v-else :src="resources.noCheck" mode=""></image>
        <view class="t-center font14 u-8bd mL5">全选</view>
      </view>
      <view style="flex: 1" class="mL20">
        <view class="u-red font18">￥{{ amount }}</view>
        <view class="u_balck font11"
          >已选择 {{ checkedPerson?.length }} 张发票</view
        >
      </view>
      <view
        class="pointer t-center u-f bg-blue2 w35 line50 radius30 mR15"
        @click="invoice"
      >
        去开票
      </view>
    </view>
    <xfTipModal ref="tipModal"></xfTipModal>
    <jobType ref="jobType" @getSelV="getSelV"></jobType>
    <jobSel ref="jobSel" @checkSel="checkSel"></jobSel>
    <jobSort ref="jobSort" @updateSelV="changeValue"></jobSort>
  </view>
</template>

<script>
import jobType from "@/components/job/jobType/index.vue";
import jobSel from "@/components/job/jobSel/index.vue";
import jobSort from "@/components/job/jobSort/index.vue";
import workerJob from "./card.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { findBillPage } from "@/api/companyInterface/user.js";
export default {
  mixins: [MescrollMixin],
  components: {
    jobType,
    jobSel,
    jobSort,
    workerJob,
  },
  data() {
    return {
      showMore: true,
      downOption: {
        use: true,
        auto: false,
      },
      amount: 0,
      isAllchecked: false,
      query: {
        // oddJobType: "",
        // sort: "",
        pageSize: 10,
        pageNo: 1,
      },
      selColor: false,
      upOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        empty: {
          use: true,
          icon: "/static/image/nodata.png",
          tip: "暂无数据",
          fixed: true,
        },
        textNoMore: "到底啦~",
      },
      list: [],
      checkedPerson: [],
      companyId: "",
    };
  },
  async onLoad(e) {
    let userInfo = this.xf.onlineUtils.getUserInfo();
    this.companyId = userInfo.companyId;
  },
  onShow(e) {
    this.mescroll && this.mescroll.triggerDownScroll();
  },
  methods: {
    //打开全部职位选择框
    openJobType() {
      this.$refs.jobType.openPoup();
    },
    //打开筛选弹窗
    openJobSel() {
      this.$refs.jobSel.openPoup();
    },
    //打开排序弹窗
    openJobSort() {
      this.$refs.jobSort.openPoup();
    },
    changeValue(v) {
      this.query[v.type] = v.value;
      this.list = [];
      this.mescroll.resetUpScroll();
    },
    getSelV(v) {
      this.query.oddJobType = v;
      this.list = [];
      this.mescroll.resetUpScroll();
    },
    checkSel(v) {
      this.query = {
        ...this.query,
        ...v,
      };
      this.list = [];
      this.mescroll.resetUpScroll();
      for (let k in v) {
        if (v[k]) {
          this.selColor = true;
          return;
        } else {
          this.selColor = false;
        }
      }
    },
    getChoose(e) {
      this.checkedPerson = e;
      // 计算选中的总金额
      this.amount = this.list
        .reduce((total, item) => {
          if (this.checkedPerson.includes(item.id)) {
            return total + parseFloat(item.money);
          }
          return total;
        }, 0)
        .toFixed(2); // 保留两位小数
    },
    checkAll(e) {
      this.isAllchecked = e;
    },
    allCheck() {
      if (this.list.length == 0) return;
      this.isAllchecked = !this.isAllchecked;
      this.$refs.workItem.allCheck(this.isAllchecked);
    },
    async upCallback(page) {
      if (page.num == 1) this.list = [];
      this.query.pageNo = page.num;

      findBillPage({ ...this.query })
        .then((res) => {
          if (res) {
            const { result } = res;
            let filteredList = result?.records?.filter(
              (item) => item.isInvoice == 0
            );
            let list = filteredList.map((item) => ({
              ...item,
              checked: false,
            }));
            this.list = this.list.concat(list);
            this.mescroll.endSuccess(this.list.length);
          }
        })
        .catch((err) => {
          this.mescroll.endByPage(0, 0);
          this.mescroll.endSuccess(0);
          this.mescroll.endErr();
        });
    },
    invoice() {
      if (this.checkedPerson.length == 0) {
        return this.xf.onlineUtils.toast("请选择要开发票的订单");
      }
      uni.navigateTo({
        url: `/pages/common/invoice/create/index?ids=${JSON.stringify(
          this.checkedPerson
        )}`,
      });
    },
    toInvoiceHistory() {
      uni.navigateTo({
        url: `/pages/common/invoice/history/index`,
      });
    },
  },
};
</script>
<style lang="scss">
page {
  min-height: 100%;
  background: linear-gradient(0deg, #f8faff, #ebf0ff);
  /* #ifdef MP-ECONOMIC */
  background: linear-gradient(0deg, #f8faff, #ebfcff);
  /* #endif */
}
.card {
  width: 750rpx;
  height: 490rpx;
  background: linear-gradient(0deg, #f8faff 0%, #ebf0ff 100%);
}
.invoice-history {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
::v-deep .u-checkbox__icon-wrap--square {
  display: none;
  position: absolute;
}
::v-deep .u-checkbox-group {
  width: 100%;
}
::v-deep .u-checkbox__label {
  width: 100% !important;
  margin-left: 0;
  margin-right: 0;
}
</style>

<style scoped lang="scss"></style>
